<template>
  <div class="app">
    <el-container>
      <!-- 头部布局 -->
      <el-header style="position: relative">
        <el-row :gutter="20">
          <el-col :span="4"><h1 class="logoTxt">Qmi音乐</h1></el-col>
          <el-col :span="1"><i class="el-icon-arrow-left"></i></el-col>
          <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
          <el-col :span="2"><i class="el-icon-refresh"></i></el-col>
          <el-col :span="8">
            <el-input
              id="Searchipt"
              placeholder="请输入搜索歌曲"
              v-model="search"
            >
              <i id="search" class="el-icon-share"></i>
            </el-input>
          </el-col>
          <el-col style="float: right" :span="1"
            ><i class="el-icon-switch-button" @click="outLogin"  title="退出"></i
          ></el-col>
        </el-row>
      </el-header>
      <!-- 侧边栏布局 -->
      <el-container>
        <el-aside width="220px"
          ><el-row class="tac"
            ><el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#311142"
                text-color="#fff"
                active-text-color="#ffd04b"
                :router="true"
              >
                <!-- 未登录显示默认图像,登陆成功显示用户个人图像 -->
                <div class="active_logo" @click="centerDialogVisible = true">
                  <img :src="avatarUrl" alt="" title="点击头像登录哦" />
                  <!-- 未登录显示提示登录的文字,在登录成功后进行隐藏 -->
                  <span
                    v-if="strimg.length === 0"
                    class="text-muted text-xs block"
                    id="chakhsu"
                    style="color: #ccc; font-size: 8px"
                  ></span>
                  <!-- 在登录成功显示用户昵称 -->
                  <span v-else style="color: #ffd04b; font-size: 8px"
                    >欢迎你"{{ nickname }}"</span
                  >
                </div>
                <el-menu-item index="recommend"  v-if="nickname !== '' ">
                  <i class="iconfont icon--xingxingtuijian"> </i>
                  <span slot="title">推荐</span>
                </el-menu-item>
                <el-menu-item index="musicHall">
                  <i class="iconfont icon-yinle3"></i>
                  <span slot="title">音乐馆</span>
                </el-menu-item>
                <el-menu-item index="radio">
                  <i class="iconfont icon-diantai"></i>
                  <span slot="title">我的电台</span>
                </el-menu-item>
                <p></p>
                <el-menu-item index="mymusic">
                  <i class="iconfont icon-gedan"></i>
                  <span slot="title">我的音乐</span>
                </el-menu-item>
                <el-menu-item index="lastmusic">
                  <i class="iconfont icon-zuijinfangwen-"></i>
                  <span slot="title">最近播放</span>
                </el-menu-item>
                <el-menu-item index="likemusic">
                  <i class="iconfont icon-xihuan1"></i>
                  <span slot="title">我喜欢</span>
                </el-menu-item>
                <el-submenu style="margin-left: 10px" index="7">
                  <template slot="title">
                    <i class="iconfont icon-yinleliebiao"></i>
                    <span>我的歌单</span>
                  </template>
                  <el-menu-item style="margin-left:-15px; overflow: hidden;
text-overflow:ellipsis;" v-for="item in playList" :key="item.id" index="7-1"><i class="iconfont icon-yinle2"></i>{{item.name}}</el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row></el-aside
        >
        <!-- 登录框 -->
        <el-dialog
          id="logoipt"
          title="请登录网易云音乐账号"
          :visible.sync="centerDialogVisible"
          width="25%"
          center
        >
          <el-form ref="form" :model="form" label-width="60px">
            <el-form-item label="账号">
              <el-input
                v-model="form.username"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="form.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="loginFn">登录</el-button>
          </span>
        </el-dialog>
        <!-- 主体页面布局 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      search: '',
      centerDialogVisible: false,
      avatarUrl: 'https://img.ichuguang.com/imgs/2021/09/5fe34d267f71ce75.jpg',
      strimg: '',
      nickname: '',
      accountId: '',
      playList: '',
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    async loginFn () {
      const { data: res } = await this.$axios({
        url: `/login/cellphone?phone=${this.form.username}&password=${this.form.password}`
      })
      if (res.code !== 200) {
        this.$message.error(res.msg)
      } else {
        this.$message.success('登录成功')
        // 登录成功要进行的操作
        console.log(res)
        window.sessionStorage.setItem('token', res.token)
        window.sessionStorage.setItem('cookie', res.cookie)
        window.sessionStorage.setItem('avatarUrl', res.profile.avatarUrl)
        window.sessionStorage.setItem('nickname', res.profile.nickname)
        window.sessionStorage.setItem('accountId', res.account.id)
        this.avatarUrl = res.profile.avatarUrl
        this.nikename = res.profile.nikename
        this.accountId = res.account.id
        this.centerDialogVisible = false

        // 刷新页面
        this.$router.push('/recommend')
        location.reload()
      }
    },
    outLogin () {
      this.$confirm('您将要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.clear()
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
        location.reload()
      }).catch()
    }
  },
  async created () {
    const str = window.sessionStorage.getItem('avatarUrl')
    if (str) {
      this.avatarUrl = window.sessionStorage.getItem('avatarUrl')
      this.strimg = window.sessionStorage.getItem('token')
      this.nickname = window.sessionStorage.getItem('nickname')
      this.accountId = window.sessionStorage.getItem('accountId')
    }
    // 获取用户歌单
    const { data: resplaylist } = await this.$axios({
      url: `/user/playlist?uid=${this.accountId}&limit=4`
    })
    this.playList = resplaylist.playlist
  }
}
</script>

<style scoped>
.active_logo {
  width: 80px;
  height: 80px;
  margin-top: 30px;
  margin-bottom: 50px;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  cursor: pointer;
}
.active_logo :hover {
  transform: rotate(720deg);
  transition: all 0.5s;
}
.active_logo img {
  width: 100%;
  border-radius: 50%;
}
.el-header {
  background-color: #311142;
}
.el-aside {
  background-color: #311142;
  position: fixed;
  top: 80px;
  bottom: 0;
  left: 0;
  right: 0;
}

.el-main {
  background-color: #eaedf1;
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: 200px;
}
.el-menu {
  border-right: none;
}
.el-col h1 {
  color: #fff;
  margin-left: 30px;
}
.el-col i {
  font-size: 24px;
  font-weight: 700;
  line-height: 60px;
  color: #ccc;
}
.el-input {
  margin-top: 10px;
}
.el-menu-item {
  margin-left: 10px;
}
.el-dialog {
  background-color: rgb(105, 49, 49);
}
</style>
